import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';

import classNames from 'classnames';
import {splitObject} from '../../util/splitObject';
import {omit} from '../../util/omit';

const Button = require("../Button");

import Dialog from './Modal';

export default function confim (config)  {

    const props = Object.assign({},config);

    const prefixCls = "fly-confirm";

    const cls = classNames(props.className,prefixCls);

    const div = document.createElement("DIV");
    document.body.appendChild(div);

    const close = ()=>{
        const rdiv =  ReactDOM.unmountComponentAtNode(div);
        if(rdiv){
            div.parentNode.removeChild(div);
        }
    };

    const btnClick = (fun)=>{
        if(typeof fun !== "function"){
            return close;
        }
        return ()=>{fun(close)}
    };

    // close
    const footer = ()=>{
        if(props.okCancel){
           return <div className={`${prefixCls}-footer`}>
                <Button
                    type="blank"
                    onClick={btnClick(props.onCancel)}
                >
                    取消
                </Button>
               <Button
                   onClick={btnClick(props.onOk)}
               >
                   确定
               </Button>
            </div>
        }else{
            return  <div className={`${prefixCls}-footer`}>
                <Button
                    onClick={btnClick(props.onCancel)}
                >
                    确定
                </Button>
            </div>
        }

    };

    const body = ()=>{
        return <div className={`${prefixCls}-body`}>
            <h3 className={`${prefixCls}-title`}> {props.title} </h3>
            <div className={`${prefixCls}-content`}>
                {props.content}
            </div>
        </div>
    };

    ReactDOM.render(
        <Dialog
            className={cls}
            visible
            footer={null}
            title=""
            transitionName="zoom"
            maskTransitionName="fade"
            maskClosable={true}
            onCancel={close}
        >
            <div className={`${prefixCls}-body-wrap`}> 
                {body()}{footer()}
            </div>
        </Dialog>
        ,div
   )
}